<template>
	<view style="width: 100%;border-bottom: solid 1rpx #eee;display: flex;justify-content:space-between;align-items: center;padding: 28rpx 20rpx;position:fixed;top:0;left:0;right:0;height: 60px;z-index: 22;background-color: white;">
			<view style="display: flex;position: absolute;z-index: 22;" @click="back">
				<u-icon name="arrow-left"></u-icon>
				<view>返回</view>
			</view>
		
		<view style="font-weight: bold;position: absolute;left: 0;right: 0;height: 100%;display: flex;align-items: center;justify-content: center;">
			创建图文
		</view>
		 
<!-- 			<view @click="createPost" style="position: absolute;z-index: 22;right: 25rpx;;display: flex;align-items: center;;padding: 10rpx 25rpx;margin: 0 10rpx;border-radius: 10rpx;box-shadow: 0 0 14px 0 #66666635;border: solid 1rpx #ddd;">
				<u-icon name="plus-circle"></u-icon>
				<view style="margin-left: 10rpx;">
					新建图文 
				</view>
			</view> -->
	</view>
		
	<view style="margin: 0 10rpx;box-sizing: border-box;padding-top: 60px;"></view>
			
	<view>		
		<u-cell-group>
			<u-cell         
				title="图文标题"
				value="内容"
				center
			>
			<template #value>
				<view>
					<u-input
					  placeholder="例如: xx月xx日,日结兼职岗位招聘"
					  border="surround"
					  v-model="this.$officePost.create.createPost.title"
					></u-input>
				</view>
			</template>
			

			</u-cell>
			
			<u-cell
				title="描述"
				value="内容"
				center
			>
				<template #value>
					<view style="flex: 2;">
						<u--textarea v-model="this.$officePost.create.createPost.digest" placeholder="请输入内容" :height="150"  count autoHeight></u--textarea>
					</view>
				</template>
			</u-cell>
			
			<u-cell
				title="图文封面"
				center
			>
				<template #value>
					<view>
						<u-upload
							:fileList="fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							multiple
							:maxCount="1"
							:sizeType="['original', 'compressed']"
						></u-upload>
					</view>
				</template>		
			</u-cell>
			
			<u-cell
				title="图文封面"
				center
			>
			<template #value>
				<view>
					剪裁
				</view>
			</template>		
			</u-cell>
				
<!-- 			<u-cell
				title="图文描述"
				value="内容"
				label="描述信息"
				center
			>
				<template #value>
					<u-rate :count="count" v-model="star"></u-rate>
				</template>		
			</u-cell> -->
		</u-cell-group>
		
		<view style="padding-top: 60px;"></view>
		
		<view @click="showComfirmModal=true" style="
			position: fixed;bottom: 0;
			left:0;right:0;
			height: 60px;
			display: flex;
			align-items: center;
			background-color: white;
			border-top: solid 1rpx #eee;
			"
		>
			<view @click="onCreateComfirm" style="
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10rpx 0rpx;
				border-radius: 10rpx;
				box-shadow: 0 0 14px 0 #66666635;
				border: solid 1rpx #ddd;
				top:10px;bottom: 10px;left:10px;right: 10px; 
				position: absolute;
			">
					下一步
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				postTemplate:{
					title:'',
					digest:'',
					html:'',
					thumb_url:''
				},
				count: 4,
				value: "",
				value1:'',
				star:2,
				fileList1:[]
			}
		},
		onLoad(){
			var digest = this.$officePost.create.createPost.html.replaceAll(/(<[^>]*>)/g,'').replaceAll(/[\s\n]/g,'')
			console.log(digest)
			digest = digest.substr(0,50)
			console.log(digest)
			
			this.$officePost.create.createPost.digest = digest
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			async imageCrop(imageUrl){
				uni.navigateTo({
					url:`../image-cropper?url=${imageUrl}`
				})
				
				return new Promise((resolve,reject)=>{
					uni.$once('imageCrop',(url)=>{
						resolve(url)
					})
				}) 
			},
			async getImageInfo(url){
				return new Promise((resolve,reject)=>{
					uni.getImageInfo({
						src:url,
						success(res) {
							resolve(res)
						},
						fail(err) {
							reject(err)
						}
					})
				})
			},
			async afterRead (event) {	
				console.log(JSON.stringify(event))

				try{				
					this.$officePost.create.createPost.thumb_url =  event.file[0].url //res.data.path
					
					//console.log(res)
					console.log(await this.getImageInfo(this.$officePost.create.createPost.thumb_url))
					var url = await this.imageCrop(this.$officePost.create.createPost.thumb_url)
					console.log(url)
					

					this.$officePost.create.createPost.thumb_url = null
					
					uni.showLoading({
						title:'正在上传',
						mask:true
					})
					
					const res = await this.$netTool.handleUploadFile(this.apiUrl('common/storage/upload/image'),url,'image','image',{},{},{
						blob:{
							filename:'image.png',
							mimeType: 'image/png'
						}
					})
					
					uni.hideLoading()
					
					uni.showToast({
						title:'上传成功'
					})
					
					this.$officePost.create.createPost.thumb_url = this.absUrl(res.data.path)
					
					this.fileList1.push({
						...event.file[0],
						status: 'success',
						message: '',
						thumb: url, //this.absUrl(res.data.path),
						url: url //this.absUrl(res.data.path)
					})

				}catch(e){
					//TODO handle the exception
					console.log(e)
					return
				}
			},
			deletePic(){
				
			},
			async onCreateComfirm(){
				console.log(this.$officePost.create.createPost)
				
				if(!this.$officePost.create.createPost.title)
				{
					uni.showToast({
						title:'请填写标题'
					})
					
					return
				}
				
				// if(!this.$officePost.create.createPost.html)
				// {
				// 	uni.showToast({
				// 		title:'内容不能为空'
				// 	})
					
				// 	return
				// }
				
				if(!this.$officePost.create.createPost.digest)
				{
					uni.showToast({
						title:'请填写描述'
					})
					
					return
				}
				
				if(!this.$officePost.create.createPost.thumb_url)
				{
					uni.showToast({
						title:'请上传封面'
					})
					
					return
				}
				
				uni.navigateTo({
					url: 'tasks-selector'
				})
			}
		}
	}
</script>

<style>

</style>
